<template>
	<view class="content">
		<image class="backimg" mode=""></image>
		<view class="wrapper">
			<view class="navigation" :style="{ height: newNavHeight + 'px',marginBottom: '10rpx' }">
				<text style="font-size: 35rpx;align-self: flex-end;font-weight: bold;">红十字会应急培训</text>
			</view>
			<view class="infobox">
				<view class="avatarbox">
					<image :src="ASSETS_URL + info.avatarUrl" mode=""></image>
				</view>
				<view class="namebox">
					<text class="_ellipsis_wrapper" style="width: 400rpx;">{{info.nickName}}</text>
					<text>{{info.phone}}</text>
				</view>
			</view>
			<view class="service">
				<text>我的服务</text>
				<view class="item" v-for="(item, index) in serviceList" :key="index" @click="gotoPage(item.path,index)">
					<view class="left">
						<image :src="item.icon" mode=""></image>
						<text>{{item.title}}</text>
					</view>
					<up-icon name="arrow-right" color="#000" size="18"></up-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		ASSETS_URL
	} from "../../uitls/global.js"
	import {
		getUserById
	} from '../../api/user';
	const navigationBarHeight = getApp().globalData.navigationBarHeight
	const statusBarHeight = getApp().globalData.statusBarHeight
	const newNavHeight = getApp().globalData.newNavHeight
	const info = ref({
		avatarUrl: '',
		nickName: '',
		phone: ''
	})
	const serviceList = [{
		icon: '../../static/icons/edit.png',
		title: '编辑资料',
		path: '/pages/mine/edit?info='
	}, {
		icon: '../../static/icons/describe.png',
		title: '平台说明',
		path: '/pages/mine/introduce'
	}, ]

	function gotoPage(path,index) {
		uni.navigateTo({
			url: path,
		});
	}
	onShow(async () => {
		const {
			data
		} = await getUserById()
		info.value = data;
	})
</script>
<style>
	page {
		background-color: #f0f0f0;
	}
</style>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background: linear-gradient(180deg, rgba(235, 50, 22, 1) 0%, rgba(255, 255, 255, 1) 60%);
	}

	// .backimg {
	// 	width: 100%;
	// 	height: 100%;
	// }

	.bottomback {
		flex: 1;
		margin-top: -30px;
		padding-top: 30px;
		background: rgb(235, 50, 22);
		background: linear-gradient(180deg, rgba(235, 50, 22, 1) 20%, rgba(255, 255, 255, 1) 60%);
	}

	.wrapper {
		position: absolute;
		height: 100vh;
		width: 100%;
		overflow: hidden;

		.navigation {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.1rem;
			letter-spacing: 2rpx;
			color: #fff;
		}

		.infobox {
			display: flex;
			padding: 10px 30px 20px 30px;
			height: 80px;
			gap: 10px;
			align-items: center;

			.avatarbox {
				border: white solid 2px;
				border-radius: 50%;
				height: 80px;

				image {
					width: 80px;
					height: 100%;
					border-radius: 50%;
				}
			}

			.namebox {
				display: flex;
				flex-direction: column;
				gap: 10px;

				text:nth-child(1) {
					font-weight: bold;
					font-size: 16px;
					color: white;
				}

				text:nth-child(2) {
					color: gray;
					font-size: 14px;
					color: #f0f0f0;
				}
			}
		}

		.service {
			padding: 20px;
			height: 100%;
			border-radius: 20px 20px 0 0;
			background-color: white;
			margin: 10px 20px;

			text:nth-child(1) {
				font-weight: bold;
				font-size: 16px;
			}

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 0;
				border-bottom: #f0f0f0 solid 1px;
				margin-top: 5px;

				.left {
					display: flex;
					align-items: center;
					gap: 10px;

					image {
						width: 24px;
						height: 24px;
					}
				}
			}
		}
	}
</style>